<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{ message }}
    </div>

    <script>
      let app = new Vue({
        el: "#app",
        data: {
          message: "Hello Vue!",
        },
      })
    </script>

    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound
        title!
      </span>
    </div>

    <script>
      let app2 = new Vue({
        el: "#app-2",
        data: {
          message: "You loaded this page on " + new Date().toLocaleString(),
        },
      })
    </script>

    <div id="app-3">
      <span v-if="seen">Now you see me</span>
    </div>

    <script>
      let app3 = new Vue({
        el: "#app-3",
        data: {
          seen: true,
        },
      })
    </script>

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

    <script>
      let app4 = new Vue({
        el: "#app-4",
        data: {
          todos: [
            { text: "Learn JavaScript" },
            { text: "Learn Vue" },
            { text: "Build something awesome" },
          ],
        },
      })
    </script>

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

    <script>
      let app5 = new Vue({
        el: "#app-5",
        data: {
          message: "Hello Vue.js!",
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split("").reverse().join("")
          },
        },
      })
    </script>

    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div>

    <script>
      let app6 = new Vue({
        el: "#app-6",
        data: {
          message: "Hello Vue!",
        },
      })
    </script>

    <div id="app-7">
      <ol>
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>

    <script>
      Vue.component("todo-item", {
        props: ["todo"],
        template: "<li>{{ todo.text }}</li>",
      })

      let app7 = new Vue({
        el: "#app-7",
        data: {
          groceryList: [
            { id: 0, text: "Vegetables" },
            { id: 1, text: "Cheese" },
            { id: 2, text: "Whatever else humans are supposed to eat" },
          ],
        },
      })
    </script>
  </body>
</html>
